<script setup lang="ts">
import { computed, ref } from 'vue'
import { downloadFile, useMessage } from '@own-basic-component/util'
import projectRequest from '~/api/project'
import type { TableSchemaVo } from '~/entity/project/table-schema-vo'

interface PropsState {
  projectId: string
  templateId?: string
}

const props = defineProps<PropsState>()

interface TableSchemaCheckVo extends TableSchemaVo {
  // 是否选中
  checked: boolean
}

// 过滤的名称
const filterName = ref<string>('')
// 源数据列表
const schemaArray = ref<Array<TableSchemaCheckVo>>([])
// 是否在生成中
const generating = ref<boolean>(false)
// 视图模式
const viewMode = ref<'table_comment' | 'table_name'>('table_name')
// 最终显示的列表
const showSchemaArray = computed<Array<TableSchemaCheckVo>>(() => {
  if (!filterName.value)
    return schemaArray.value
  return schemaArray.value.filter(item => item.tableName.includes(filterName.value) || item.comment.includes(filterName.value))
})
// 选中的信息
const checkedSchemaArray = computed<Array<TableSchemaCheckVo>>(() => schemaArray.value.filter(item => item.checked))
// 全部数据表 标题的名称
const showTableNameText = computed<string>(() => !filterName.value ? '全部数据表' : '过滤后的数据表')
// 是否禁用操作按钮
const disabledSelectButton = computed<boolean>(() => !generating.value && checkedSchemaArray.value.length === 0)
// 当前的视图是否有数据
const hasViewContent = computed<boolean>(() => showSchemaArray.value.length > 0)

const checkedMethod = {
  /**
   * 追加
   */
  append() {
    showSchemaArray.value.forEach(item => item.checked = true)
  },
  /**
   * 选中当前筛选
   */
  now() {
    checkedMethod.cancelAll()
    checkedMethod.append()
  },
  /**
   * 取消选中当前筛选
   */
  cancelNow() {
    showSchemaArray.value.forEach(item => item.checked = false)
  },
  /**
   * 取消全部
   */
  cancelAll() {
    schemaArray.value.forEach(item => item.checked = false)
  },
}

/**
 * 生成代码（调用后端的方法）
 */
function generate() {
  if (checkedSchemaArray.value.length === 0) {
    useMessage().error('请先选择数据表')
    return
  }
  projectRequest.generate(props.projectId, {
    templateId: props.templateId,
    tableNameList: checkedSchemaArray.value.map(item => item.tableName),
    ignoreError: 0,
  }).then(({ data: file }) => {
    useMessage().confirm('文件打包完成，是否立即下载？', () => {
      useMessage().success('开始下载')
      downloadFile(file.position + file.path, file.name)
    })
  })
}

onMounted(() => {
  projectRequest.schema(props.projectId, props.templateId).then(({ data }) => {
    schemaArray.value = data.map(item => ({ ...item, checked: false }))
  })
})
</script>

<template>
  <NCard
    title="选择数据表生成"
    :bordered="false"
    size="huge"
    role="dialog"
    aria-modal="true"
  >
    <NGrid :x-gap="12" :cols="24">
      <NGridItem span="4">
        <NInput v-model:value="filterName" type="text" placeholder="输入搜索的表名或者备注" />
      </NGridItem>
      <NGridItem span="18">
        <NSpace align="center">
          <NButton v-buried :disabled="!hasViewContent" strong secondary type="primary" @click="checkedMethod.now()">
            选中当前
          </NButton>
          <NButton v-buried :disabled="!hasViewContent" strong secondary type="primary" @click="checkedMethod.cancelNow()">
            取消当前选中
          </NButton>
          <NDivider vertical />
          <NPopover trigger="hover">
            <template #trigger>
              <NButton v-buried :disabled="!hasViewContent" strong secondary type="primary" @click="checkedMethod.append()">
                追加选中
              </NButton>
            </template>
            <span>把当前筛选的数据追加到选中列表</span>
          </NPopover>
          <NButton v-buried strong secondary type="primary" :disabled="disabledSelectButton" @click="checkedMethod.cancelAll()">
            取消全部
          </NButton>
          <NDivider vertical />
          <NButton v-buried strong secondary type="primary" :disabled="disabledSelectButton" @click="generate">
            {{ generating ? '生成中...' : '生成代码' }}
          </NButton>
          <NDivider vertical />
          <n-button-group>
            <n-button v-buried="'视图切换到表名'" ghost :type="viewMode === 'table_name' ? 'primary' : 'default'" @click="viewMode = 'table_name'">
              <i i-ri-bill-line />
            </n-button>
            <n-button v-buried="'视图切换到备注'" ghost :type="viewMode === 'table_comment' ? 'primary' : 'default'" @click="viewMode = 'table_comment'">
              <i i-ri-book-read-line />
            </n-button>
          </n-button-group>
        </NSpace>
      </NGridItem>
    </NGrid>
    <NDivider title-placement="left">
      {{ showTableNameText }}
    </NDivider>
    <NGrid :x-gap="12" :y-gap="8" :cols="4">
      <NGridItem v-for="item in showSchemaArray" :key="item.tableName">
        <NCheckbox v-model:checked="item.checked" v-buried>
          <template v-if="viewMode === 'table_name'">
            {{ item.tableName }}
          </template>
          <template v-if="viewMode === 'table_comment'">
            {{ item.comment }}
          </template>
        </NCheckbox>
      </NGridItem>
    </NGrid>
    <NDivider v-if="checkedSchemaArray.length > 0" title-placement="left">
      已选中的
    </NDivider>
    <NGrid :x-gap="12" :y-gap="8" :cols="4">
      <NGridItem v-for="item in checkedSchemaArray" :key="item.tableName">
        <template v-if="viewMode === 'table_name'">
          {{ item.tableName }}
        </template>
        <template v-if="viewMode === 'table_comment'">
          {{ item.comment }}
        </template>
      </NGridItem>
    </NGrid>
  </NCard>
</template>

<style scoped>

</style>
